<template>
  <div style="border: 1px solid #ccc;">
    <Toolbar
        :defaultConfig="toolbarConfig"
        :editor="editor"
        :mode="mode"
        style="border-bottom: 1px solid #ccc"
    />
    <Editor
        v-model="html2"
        :defaultConfig="editorConfig"
        :mode="mode"
        class="editor"
        style="height: 500px; overflow-y: hidden;"
        @onChange="onChange"
        @onCreated="onCreated"
    />
  </div>
</template>
<style src="@wangeditor/editor/dist/css/style.css"></style>
<style lang="scss">
.editor {
  .w-e-text-container {
    background-color: rgba(17, 91, 91, 0.2);
  }

  .w-e-text-container [data-slate-editor] p, .w-e-text-container [data-slate-editor] h1, .w-e-text-container [data-slate-editor] h2, .w-e-text-container [data-slate-editor] h3, .w-e-text-container [data-slate-editor] h4, .w-e-text-container [data-slate-editor] h5 {
    margin: 0;
  }
}
</style>
<script>
/* eslint-disable */
import Vue from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'

const editorConfig = {
  MENU_CONF: {},
  placeholder: '请输入内容...'
}
editorConfig.MENU_CONF['uploadImage'] = {
  server: "http://" + window.location.hostname + ":9001" + '/uploadImageW',
  fieldName: 'image',
}
editorConfig.MENU_CONF['uploadVideo'] = {
  server: "http://" + window.location.hostname + ":9001" + '/uploadVideo',
  fieldName: 'video',
  maxFileSize: 50 * 1024 * 1024, // 5M
  maxNumberOfFiles: 2,
}
export default Vue.extend({
  name: "MoreTextEdtWang",
  components: {Editor, Toolbar},
  props: {
    textText: {
      type: String,
    },
  },
  data() {
    return {
      editor: null,
      html2: '<p>hello</p>',
      toolbarConfig: {
        excludeKeys: [
          "blockquote", // 引用
          "codeBlock", // 代码块
          "bulletedList", // 无序列表
          "insertTable",// 插入表格
          "code",//行内代码
          // "emotion",//表情
        ]
      },
      editorConfig: editorConfig,
      mode: 'default', // or 'simple'
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    onChange(editor) {
      // 当需要获取和显示HTML内容时
      const htmlContent = editor.getHtml();
      this.$emit('update', htmlContent);
    },
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  },
  created() {
    console.log(this.textText)
    this.html2 = this.textText
  }
})
</script>